<template>
    <div class="hngkContent">
        <div class="hngkLeft">
            <LeftChange
                :zrzhCount="zrzhCount"
                :aqscCount="aqscCount"
                :qushiCount="qushiCount"
            />
        </div>
        <div class="hngkRight">
            <RightChange />
        </div>
        <Dialog />
    </div>
</template>

<script>
import LeftChange from "./hngkLeft/LeftChange";
import Dialog from "./hngkParts/Dialog";
import RightChange from "./hngkRight/RightChange";
import { defineComponent, onMounted, ref,onBeforeUnmount } from "vue";
import { get } from "../../util/request";
//自然灾害总数
const zrzhCountEffect = () => {
    let zrzhCount = ref([]);
    const getZrzhCount = async () => {
        const result = await get("/api/pandect/risk/countAll");
        zrzhCount.value = result.data;
    };
    return { zrzhCount, getZrzhCount };
};
//安全生产总数
const aqscCountEffect = () => {
    let aqscCount = ref([]);
    const getAqscCount = async () => {
        const result = await get("/api/pandect/safety/produceTypes");
        aqscCount.value = result.data;
    };
    return { aqscCount, getAqscCount };
};
//安全事故数趋势
const qushiCountEffect = () => {
    let qushiCount = ref([]);
    const getQushiCount = async () => {
        const result = await get("/api/pandect/countAccidents");
        qushiCount.value = result;
    };
    return { qushiCount, getQushiCount };
};

export default defineComponent({
    components: {
        LeftChange,
        RightChange,
        Dialog,
    },
    setup() {
        const { zrzhCount, getZrzhCount } = zrzhCountEffect();
        const { aqscCount, getAqscCount } = aqscCountEffect();
        const { qushiCount, getQushiCount } = qushiCountEffect();
        getZrzhCount();
        getAqscCount();
        getQushiCount();
        onMounted(() => {
            const tool = window.document.getElementById("tool");
            if(tool){
                tool.style.right="100px"
            }
           const tools = window.document.getElementById("tools");
            if(tools){
                tools.style.right="100px"
            }
            const toolcontent = window.document.getElementById("toolcontent");
            if(toolcontent){
                toolcontent.style.right="160px"
            }
            // console.log(123)
        });
        onBeforeUnmount(()=>{
            const tool = window.document.getElementById("tool");
            if(tool){
                tool.style.right="410px"
            }
            const tools = window.document.getElementById("tools");
            if(tools){
                tools.style.right="410px"
            }
              const toolcontent = window.document.getElementById("toolcontent");
            if(toolcontent){
                toolcontent.style.right="470px"
            }
        })
        return {
            zrzhCount,
            aqscCount,
            qushiCount,
        };
    },
});
</script>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .hngkLeft {
        leftContent();
    }

    .hngkRight {
        rightContent();
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .hngkLeft {
        leftContent3840();
    }

    .hngkRight {
        rightContent3840();
    }
}
</style>